<template>
  <div class='games-official'>
    <a class='game' href='' v-if='gameList.length > 0' @click.stop.prevent="gameDetail">
      <div class="huge-game-icon" v-if='gameList[0].GAME_TYPE == "CLS"'>超级赛</div>
      <div class='official-game-icon' v-else-if='gameList[0].GAME_KIND == "1"'>官方</div>
      <div class='text-center'>

        <img src='~assets/images/shuyezuo@3x.png'>
        <div class='games-block-content'>
          <div class='game-name' v-text='gameList[0].GAME_NAME'></div>
          <div class='date' >{{gameList[0].BEGIN_DATE | formatDatePoint}}-{{gameList[0].END_DATE | formatDatePoint}}
            <b>
              <i class="arrow-right1"></i><i class="arrow-right2"></i>
            </b>
          </div>
        </div>
        <img src='~assets/images/shuyeyou@3x.png'>
      </div>

      <div class='row relative'>
        <div class='col-xs-3 text-center total-bonus no-padding'>
          <div class='key'>
            <img src='~assets/images/jun@3x.png' width='30px'>
          </div>
          <div class='value'>{{gameList[0].GAME_AMOUNT | cutNumber}}</div>
        </div>

        <div class='col-xs-6 text-center exist-player no-padding'>
          <div class='key'>已有报名人数</div>
          <div class='value' v-text='Number(gameList[0].GAME_ATTEND_PERSON).toFixed(0)'></div>
        </div>

        <div class='col-xs-3 text-center hot no-padding' v-html='gameList[0].gameStep'>
          <!-- <div class=''>火热</div>
          <div class=''>报名中</div> -->
        </div>
      </div>

      <div class='forward'>
        <i class='iconfont icon-xiangyou'></i>
      </div>
    </a>
    <div class='placeholder' v-if='gameList.length == 0'>
      <div class='content'>
        <div class='tips' v-if="error == ''">
          哎呦，还没有<span class="color-blue">官方比赛</span>哦
        </div>
        <div class='tips' v-else>
          {{error}}
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'
  import {openGame} from 'components/game/openGame'
  import formatDatePoint from 'filters/formatDatePoint'
  import filterGameStep from 'filters/filterGameStep'
  import cutNumber from 'filters/cutNumber'
  export default {
    filters: {formatDatePoint, cutNumber, filterGameStep},
    data () {
      return {
        title: '牛人牛股',
        gameList: [],
//        gameList: [{gameName:'比赛名', rankNum: '0',gameAttendPerson:'0',beginDate:'xxxx.xx.xx',endDate:'xxxx.xx.xx',gameAmount:'100'}],
        error: '数据加载中...'
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      fetchData () {
        // 官方比赛推荐查询
        let param = {
        	userCode: '0',
        	gameId: '',
        	gameStatus: '1',
        	gameKind: '1',
        	pageSize: '10',
        	pageNum: '1'
        }
        RemoteDAO.callUC12008302(param, (response) => {
          if (Number(response.error) === 0) {
            var listEligible = []
            var list = [] // 目前只展示一条官方推荐比赛，考虑以后可能多条，此处使用 list
            var data = response.data.body
            if (data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                if( data[i].GAME_STEP === '1' || data[i].GAME_STEP === '2' || data[i].GAME_STEP === '3' ) 
                  data[i].gameStep = this.breakWord(filterGameStep(data[i].GAME_STEP), 2)
                  listEligible.push(data[i]);
              }
              let index = Math.floor(Math.random() * listEligible.length)
              if (listEligible.length > 0) {
                list.push(listEligible[index])
              }
              this.gameList = list
              this.error = ''
              // _.each(data, function (item, index) {
              //   var object = {}
              //   object.gameId = item.GAME_ID
              //   object.gameName = item.GAME_NAME
              //   object.beginDate = CommonUtil.formatDatePoint(item.BEGIN_DATE)
              //   object.endDate = CommonUtil.formatDatePoint(item.END_DATE)
              //   object.gameAttendPerson = item.GAME_ATTEND_PERSON
              //   object.gameAmount = CommonUtil.toFixed(item.GAME_AMOUNT, 0)
              //   object.gameType = item.GAME_TYPE;
              //   object.gameKind = item.GAME_KIND;
              //   if (_.contains(["1", "2", "3"], item.GAME_STEP)) { // 只展示报名中，报名已结束，比赛中的比赛
              //     listEligible.push(object)
              //   }
              // })

              // var index = Math.floor(Math.random() * listEligible.length)
              // if (listEligible.length > 0) {
              //   list.push(listEligible[index])
              // }
              // self.gameList = list
              // self.error = ''
            }
          } else {
            self.error = response.data
          }
        })
      },
      gameDetail (){
        // var gameId = this.gameList[0].gameId;
        // this.$router.push({path: '/game/gamedetail', query: {gameId: gameId}});
        openGame(this.gameList[0], this)
        var kv = {"usercode": LocalDAO.getUserCode(),"k2":""}
        TDAPP.onEvent("14011","",kv)
        TDAPP.send()
      },
      breakWord (gameStep, firstRowLength) {
        if(gameStep == null || gameStep == undefined || typeof gameStep !== 'string' || gameStep.length == 0) return gameStep
        if(gameStep.length <= firstRowLength) return gameStep;
        return gameStep.substring(0, firstRowLength) + '<br/>' + gameStep.substring(firstRowLength)
      }
    }
  }
</script>

<style scoped>

</style>
